<script setup lang='ts'>
import { ref } from 'vue';
import {useCounterStore} from '@/stores/users'

// 导入路由用路由实现跳转
import {useRouter} from 'vue-router'
const router =useRouter()
const userStore =useCounterStore()
const loginname = ref();
const password = ref();

const onSubmit = async (values: { loginname: string, password: string }) => {
 try { 
    const result =await  userStore.loinHandler(values)
    router.push("/home")
 } catch {
    
 }
  
    
};


//编写正则,用于校验账号和密码
const pattern = /\w{6,15}/


</script>
<template>
    <div class="container">
        <van-nav-bar title="晨锋电商" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="loginname" name="loginname" label="用户名" placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }, { pattern, message: '输入的用户名在6~15位之间' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }, { pattern, message: '输入的密码在6~15位之间' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit"
                    color="linear-gradient(to right,  #56AB2F, #A8E063)">
                    登入
                </van-button>
            </div>
        </van-form>

        <van-cell-group title="去注册">
            <van-cell title="快速注册" is-link url="/register"/>
        </van-cell-group>
    </div>
</template>
<style scoped lang="scss">
   .van-form{
    margin-top:60px;
}
</style>